<template>
  <div class="coreRevenue clearfix">
    <div class="logoBg"><img src="~@/assets/images/common/fiveG.png" /></div>
    <div class="heading">
      收入分析：<span class="redTitle">{{ mainTopicContent }}</span>
    </div>
    <div class="content">
      <div class="tableBox">
        <el-table
          border
          stripe
          style="width: 100%"
          class="tableTh28"
          ref="table"
          :data="tableData"
          :span-method="arraySpanMethod"
        >
          <el-table-column
            fixed
            :label="accMonth + '收入环比（万元）'"
            prop="class2"
            class-name="first-title"
            width="20"
          ></el-table-column>
          <el-table-column
            fixed
            :label="accMonth + '收入环比（万元）'"
            prop="class1"
            class-name="second-title"
            width="50"
          ></el-table-column>
          <el-table-column
            fixed
            :label="accMonth + '收入环比（万元）'"
            prop="indexName"
            class-name="third-title"
            width="90"
          ></el-table-column>
          <el-table-column
            v-for="(item, index) in colList"
            :prop="'data' + index"
            :label="item"
            :key="index"
            min-width="40"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row['data' + index] > 0"
                style="color: #5585bf"
                >{{ scope.row["data" + index] }}</span
              >
              <span v-else style="color: #c00000">{{
                scope.row["data" + index]
              }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="desc">
        <div class="positiveNumber">
          <div class="title">
            主要环比正项因素<br />(共{{ increaseAmount }}万元)
          </div>
          <ul class="flexUl">
            <li
              class="clearfix"
              v-for="(item, index) in rightIncreaseData"
              :key="index"
            >
              <span class="indexName"
                >{{ +index + 1 }}、{{ item.indexName }}</span
              ><span class="amount">{{ item.amount }}万元</span>
            </li>
          </ul>
        </div>
        <div class="negative">
          <div class="title">
            主要环比负项因素<br />(共{{ decreaseAmount }}万元)
          </div>
          <ul class="flexUl">
            <li
              class="clearfix"
              v-for="(item, index) in rightDecreaseData"
              :key="'key' + index"
            >
              <span class="indexName"
                >{{ +index + 1 }}、{{ item.indexName }}</span
              ><span class="amount">{{ item.amount }}万元</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import businessIncome from "@/views/budget/showPdf/showEchart/businessIncome";
import itcIncome from "@/views/budget/showPdf/showEchart/itcIncome";
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
import { getCookie } from "@/common/js/cookie";
import { mergeTableRow, mergeSpan } from "@/utils/mixin";
export default {
  name: "mainRevenue",
  components: {
    businessIncome,
    itcIncome,
  },
  props: ["areaId", "month"],
  data() {
    return {
      tableData: [],
      accMonth: "",
      mainTopicContent: "",
      colList: [],
      rightDecreaseData: {},
      rightIncreaseData: {},
      rightDecreaseIndexName: {},
      rightDecreaseAmount: {},
      decreaseAmount: "",
      increaseAmount: "",
    };
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2) {
        return this.spanArr[rowIndex][columnIndex];
      }
    },
    getTrendDataByAccMonth() {
      $budgetAPI.getTrendDataByAccMonth(
        { areaId: this.areaId, accMonth: this.month },
        (res) => {
          if (res && res.code == 0) {
            this.accMonth = this.moment(res.content.accMonth).format("M") + "月份";

            this.mainTopicContent =
              res.content.mainTopicContent.split("环")[0] +
              "环" +
              res.content.mainTopicContent.split("环")[1] +
              "从费用使用构成维度看，环" +
              res.content.mainTopicContent.split("环")[2];
            this.tableData = res.content.leftTableData.data;
            let colList1 = [];
            colList1 = res.content.leftTableData.colList;
            this.colList[0] = res.content.leftTableData.colList[0];
            for (let i = 1; i < colList1.length; i++) {
              this.colList[i] = colList1[i].substring(2, 6);
            }
            res.content.leftTableData.data.map((item, index) => {
              for (let i = 0; i < item.dataList.length; i++) {
                item["data" + i] = Math.round(Number(item.dataList[i]));
              }
            });
            // this.formmateMonth();
            this.spanArr = mergeSpan(this.tableData, [
              "class2",
              "class1",
              "indexName",
            ]);

            for (let i = 0; i < 6; i++) {
              if (res.content.rightDecreaseData.length <= 6) {
                this.rightDecreaseData = res.content.rightDecreaseData;
                break;
              }
              this.rightDecreaseData[i] = res.content.rightDecreaseData[i];
            }
            for (let i = 0; i < 6; i++) {
              if (res.content.rightIncreaseData.length <= 6) {
                this.rightIncreaseData = res.content.rightIncreaseData;
                break;
              }
              this.rightIncreaseData[i] = res.content.rightIncreaseData[i];
            }

            this.increaseAmount = res.content.increaseAmount;
            this.decreaseAmount = res.content.decreaseAmount;
          } else {
            this.alertError(res);
          }
          setTimeout(() => {
            this.$refs.table.doLayout();
          }, 500);
        },
        (err) => {}
      );
    },
  },
};
</script>

<style  lang="scss" scoped>
.coreRevenue {
  padding: 20px;
  border: 1px solid #dee5f3;
  border-radius: 5px;
  margin-top: 20px;
  position: relative;
  .coreRevenue.clearfix:after,
  .coreRevenue.clearfix:before {
    content: "";
    display: table;
  }
  .coreRevenue.clearfix:after {
    clear: both;
  }
  .coreRevenue.clearfix {
    *zoom: 1;
  }
  .logoBg {
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .heading {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    padding-bottom: 40px;
    .redTitle {
      color: #c00000;
    }
  }

  .content {
    display: flex;
    .tableBox {
      flex: 8;
      margin-right: 10px;
      border-top: 1px solid transparent;
      border-left: 1px solid transparent;
      border-right: 1px solid transparent;
      border-bottom: 1px solid transparent;
      /deep/ .el-table.tableTh28 {
        .cell {
          padding: 0 !important;
          transform: scale(0.9);
          line-height: normal !important;
        }
        // transform:scale(0.7);
        th {
          font-size: 12px;
          height: 23px;
          padding: 0;
          .cell {
            line-height: 20px;
            height: 20px;
            // height: 15px;
            // padding: 0;
          }
        }
        /deep/ tr.el-table__row td {
          font-size: 12px;
          padding: 0 !important;
        }
      }
      /deep/ .tableTh28 .el-table__header {
        .first-title.is-leaf {
          position: relative;
          border-right: 1px solid #d7e5fb !important;
          .cell {
            color: #d7e5fb;
          }
        }

        .second-title.is-leaf {
          position: relative;
          border-right: 1px solid #d7e5fb !important;
          .cell {
            color: #d7e5fb;
          }
        }
        .third-title.is-leaf {
          overflow: visible;
          .cell {
            // transform: translateX(-90%);
            width: 300%;
            left: -150%;
          }
        }
      }
      /deep/ .el-table tr:last-child td {
        color: #333;
        text-align: center;
        border-bottom: 1px solid #bfbfbf !important;
        border-right: 1px solid #bfbfbf !important;
      }
    }
    .desc {
      flex: 2;
      display: flex;
      flex-direction: column;
      .positiveNumber {
        border: 1px solid #5585bf;
        padding: 15px;
        border-radius: 5px;
        flex: 1;
        overflow: hidden;
        .title {
          font-size: 16px;
          font-weight: 700;
          color: #5585bf;
          text-align: center;
        }
        ul {
          // display: flex;
          // flex-direction: column;
          li {
            // flex:1;
            padding-top: 10px;
            .indexName {
              font-weight: 700;
              display: inline-block;
            }
            .amount {
              color: #c00000;
              display: block;
              float: right;
            }
          }
        }
      }
      .negative {
        flex: 1;
        overflow: hidden;
        margin-top: 15px;
        border: 1px solid #c00000;
        padding: 15px;
        border-radius: 5px;
        .title {
          font-size: 16px;
          font-weight: 700;
          color: #c00000;
          text-align: center;
        }
        ul {
          //  display: flex;
          //  flex-direction: column;
          li {
            //  flex:1;
            //  padding-top:5px;
            padding-top: 10px;
            .indexName {
              font-weight: 700;
              display: inline-block;
            }
            .amount {
              color: #c00000;
              display: block;
              float: right;
            }
          }
        }
      }
    }
  }
}
</style>
